<template>
  <div>
    <a-card
      :bordered="false"
      :bodyStyle="{ padding: '24px 16px', height: '100%' }"
      id="aCardPosition"
    >
      <div class="table-page-search-wrapper">
        <a-row :gutter="48">
          <a-form-model layout="inline" v-model="searchData">
            <a-col :md="8" :sm="24">
              <a-form-model-item label="搜索通知：">
                <a-input v-model="keywords" placeholder="请输入通知名称">
                  <a-tooltip slot="suffix" title="请输入通知名称">
                    <a-icon
                      type="search"
                      style="color: rgba(0,0,0,.45)"
                      @click="$refs.table.refresh(true)"
                    />
                  </a-tooltip>
                </a-input>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="接受者类型">
                <a-select v-model="searchData.type" placeholder="请选择类型" allowClear>
                  <a-select-option :value="2">班级</a-select-option>
                  <a-select-option :value="1">学员</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="发送人">
                <a-select
                  v-model="searchData.user_id"
                  placeholder="请选择教师"
                  allowClear
                  style="width:80%"
                >
                  <a-select-option
                    v-for="(item,index) in publishers"
                    :key="index"
                    :value="item.user_id"
                  >{{item.user_name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="tableTopActionBtns">
        <router-link :to="{ name: 'send_msg' }">
          <a-button type="primary">发消息</a-button>
        </router-link>
      </div>
      <s-table
        ref="table"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :loading="loading"
        class="user_management_table"
        :pagination="pagination"
        :scroll="{ x: 1500}"
      >
        <div slot="title_" slot-scope="text,record">
          <div class="title_text">
            <a title="查看详情" @click="showInfo(record)">{{record.title}}</a>
          </div>
          <div class="title_content" v-html="record.content_text"></div>
        </div>
        <span slot="recipient_name" slot-scope="text,record">
          {{record.recipient_name}}<span style="margin-left:3px" v-if="record.project_ids.length>2">...</span>
        </span>
        <span slot="read_num" slot-scope="text,record">
          <a
            @click="readLookMore(record)"
            :style="{color:record.read<record.unread?'red':''}"
          >{{record.read||'0'}}/{{record.unread||'0'}}</a>
        </span>
        <span slot="confirm_num" slot-scope="text,record">
          <a
          v-if="record.open_parent_confirm==1"
            @click="sureLookMore(record)"
            :style="{color:record.confirmed<record.unconfirmed?'red':''}"
          >{{record.confirmed||'0'}}/{{record.unconfirmed||'0'}}</a>
          <span v-else>-</span>
        </span>
        <span slot="action_" slot-scope="text,record">
          <router-link :to="{ name: 'send_msg' ,query:{id:record.id}}">
            <a>编辑</a>
          </router-link>
          <a-divider type="vertical" />
          <a @click="del(record)">删除</a>
        </span>
      </s-table>
      <a-modal
        :title="'通知详情：'+infoObj.title||''"
        :visible="infoModel"
        @cancel="infoModel = false"
        :footer="null"
      >
        <!-- <p>{{ ModalText }}</p> -->
        <p>发送人：{{infoObj.user_name||'--'}}</p>
        <p class="recipient">接受者：{{infoObj.recipient_name||'--'}}</p>
        <p>发送时间：{{infoObj.created_at||'--'}}</p>
        <div class="content" v-html="infoObj.content"></div>
      </a-modal>
      <a-modal
        title="通知详情："
        :visible="readCountModel"
        @cancel="readCountModel = false"
        :footer="null"
      >
        <a-table
          :columns="readColumns"
          :data-source="readData"
          :pagination="false"
          class="user_management_table"
          style="border:1px solid #e8e8e8;"
          :scroll="{y:400}"
        >
          <span slot="status" slot-scope="text,record">{{record.status==1?'未读':'已读'}}</span>
        </a-table>
      </a-modal>
      <a-modal
        title="通知详情："
        :visible="sureCountModel"
        @cancel="sureCountModel = false"
        :footer="null"
      >
        <a-table
          :columns="sureColumns"
          :data-source="sureData"
          :pagination="false"
          class="user_management_table"
          style="border:1px solid #e8e8e8;"
          :scroll="{y:400}"
        >
          <span slot="status" slot-scope="text,record">{{record.status==1?'未确认':'已确认'}}</span>
        </a-table>
      </a-modal>
    </a-card>
    <router-view></router-view>
  </div>
</template>
<script>
import { STable } from '@/components'
import { noticeList, noticeDel, noticeCount, noticePublisher } from '@/api/notice'
export default {
  components: {
    STable
  },
  created() {
    noticePublisher({
      school_id: this.$store.state.user.school
    }).then(res => {
      this.publishers = res
    })
  },
  data() {
    return {
      pagination:{
        showTotal:total=>`共${total}条数据`,
      },
      loading: false,
      publishers: [], //发布人
      searchData: {
        school_id: this.$store.state.user.school,
        keywords: '',
        user_id: undefined
      },
      keywords: undefined,
      infoModel: false,
      infoObj: {
        title: ''
      },
      //已读
      readCountModel: false,
      readColumns: [
        {
          title: '学员姓名',
          dataIndex: 'student_name',
          ellipsis: true
        },
        {
          title: '电话',
          dataIndex: 'phone',
          ellipsis: true
        },
        {
          title: '阅读状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: {
            customRender: 'status'
          }
        }
      ],
      readData: [],
      //确认
      sureCountModel: false,
      sureColumns: [
        {
          title: '学员姓名',
          dataIndex: 'student_name',
          ellipsis: true
        },
        {
          title: '电话',
          dataIndex: 'phone',
          ellipsis: true
        },
        {
          title: '确认状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: {
            customRender: 'status'
          }
        }
      ],
      sureData: [],
      type: 1,
      columns: [
        {
          title: '通知内容',
          dataIndex: 'title_',
          width: 300,
          fixed:'left',
          ellipsis: true,
          scopedSlots: { customRender: 'title_' }
        },
        {
          title: '接收者',
          dataIndex: 'recipient_name',
          width: 200,
          ellipsis: true,
          scopedSlots: { customRender: 'recipient_name' }
        },
        {
          title: '已读人数',
          dataIndex: 'read_num',
          align: 'center',
          scopedSlots: {
            customRender: 'read_num'
          }
        },
        {
          title: '确认人数',
          dataIndex: 'confirm_num',
          align: 'center',
          scopedSlots: { customRender: 'confirm_num' }
        },
        {
          title: '发送人',
          dataIndex: 'user_name',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'user_name' }
        },
        {
          title: '发送时间',
          dataIndex: 'created_at',
          ellipsis: true,
          align: 'center',
          scopedSlots: { customRender: 'created_at' }
        },
        {
          title: '操作',
          width: 200,
          dataIndex: 'action',
          fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'action_' }
        }
      ],
      loadData: parameter => {
        this.loading = true
        return noticeList(Object.assign(parameter, this.searchData, { keywords: this.keywords }))
          .then(res => {
            this.loading = false
            let params = JSON.parse(JSON.stringify(res))
            params.data.forEach(val => {
              let reg = /<\/?.+?\/?>/g
              val.content_text = val.content.replace(reg, '')
            })
            return params
          })
          .catch(err => {
            this.loading = false
            this.$message.error(err.data.message || '获取数据失败，请刷新页面或稍后再试')
          })
      }
    }
  },
  watch: {
    searchData: {
      handler(val) {
        this.$refs.table.refresh()
      },
      deep: true
    },
    infoModel(val) {
      if (val == false) {
        this.infoObj = {
          title: ''
        }
      }
    }
  },
  methods: {
    showInfo(e) {
      this.infoObj = e
      this.infoModel = true
    },
    del(data) {
      let that = this
      this.$confirm({
        title: '警告：删除通知?',
        content: '删除此条通知后，家长端将无法查看通知详情',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          noticeDel(data.id)
            .then(res => {
              that.$message.success('删除成功')
              that.$refs.table.refresh()
            })
            .catch(err => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    readLookMore(data) {
      noticeCount(
        {
          type: 1
        },
        data.id
      )
        .then(res => {
          this.readData = res.data
          this.readCountModel = true
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取详情失败')
        })
    },
    sureLookMore(data) {
      noticeCount(
        {
          type: 2
        },
        data.id
      )
        .then(res => {
          this.sureData = res.data
          this.sureCountModel = true
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取详情失败')
        })
    }
  }
}
</script>
<style lang="less">
.form_title {
  div {
    label {
      font-size: 16px !important;
    }
  }
}
</style>
<style lang="less" scoped>
.recipient {
  max-width: 470px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content {
  border-top: 1px solid #e8e8e8;
  padding: 15px 0 0;
}
.title_text {
  line-height: 30px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title_content {
  line-height: 30px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tableTopActionBtns {
  button {
    margin: 0 20px 16px 0;
  }
}
</style>